<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>解构赋值</title>
</head>
<body>
  
</body>

<script type="text/javascript">
  
  // 解构赋值是对赋值运算符的一种扩展，它针对数组和对象进行操作
  // 优点：代码书写上简洁易读

  // 完全解构
  let person = {
    name: 'chengjunyu',
    age: 30
  }
  // let name = person.name
  // let age = person.age
  let {name, age} = person
  console.log('name', name);
  console.log('age', age);

  // 不完全解构，可忽略部分属性，可使用...运算符结构剩余属性到一个对象
  let obj = {
    user: {
      name: 'zhangsan',
      age: 20
    },
    arrays: [],
    str: 'hello'
  }
  let {user, ...res} = obj
  console.log(user)
  console.log(res)

  // 默认值
  let {num1, num2 = 30} = {num1:20}
  console.log('num1', num1);
  console.log('num2', num2);

  // 数组结构
  // let arr = [1, 2, 3]
  // let [a, b, c] = arr
  // console.log(a, b, c);
  // console.log(a, c);
  // console.log(c)
  let [a, [b,c], d] = [1, [2,3], 4]
  console.log(b, c);


</script>
</html>